<template>
    <div id="place">
        <header>
            <div class="header">
              <router-link to='/'>
                  <img src="../../assets/index/qy-logo.svg" alt="">
              </router-link>
              <input type="text" name="" id="" placeholder="搜索国家/城市/景点/美食">
            </div>
        </header>
        <placehotsession></placehotsession>
        <router-link class="seeallcountry" to=''>
            <div class="seeInfo">
                <i class="el-icon-orange"></i>
                &nbsp;&nbsp;查看全部国家
            </div>
            <div class="see-icon">
                <i class="el-icon-arrow-right"></i>
            </div>
        </router-link>
        <visafree></visafree>
        <popularisland></popularisland>
        <topic></topic>

    </div>
</template>


<script type="text/javascript">
    import placehotsession from '@/components/place/placehotsession'
    import visafree from '@/components/place/visafree'
    import popularisland from '@/components/place/popularisland'
    import topic from '@/components/place/topic'
    export default {
        name:'place',
        components:{
            'placehotsession':placehotsession,
            'visafree':visafree,
            'popularisland':popularisland,
            'topic':topic
        },
        data(){
            return {
                
            }
        },
        methods:{
            
        }
    }


</script>


<style type="text/css" lang='less'>
    #place{
        background-color: #f5f5f5;
        position:relative;
        height:100vh;
        overflow-y:auto;
        header{
            .header{
                padding:8px 20px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                background-color:white;
                align-items: center;
                img:first-child{
                    height: 20px;
                }
                input{
                    border:1px solid transparent;
                    font-size:12px;
                    height:25px;
                    border-radius: 10px;
                    outline:none;
                    width:75%;
                    padding-left:40px;
                    background-color: #f0f0f0;
                    background-image:url(../../assets/index/搜索.svg);
                    background-repeat:no-repeat;
                    background-size: contain;
                    background-position: left 10px center;
                }
            }
        }
        .seeallcountry{
            box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
            margin:auto;
            margin-top: 2.5em;
            padding:1.5em 1em;
            display:block;
            width:90%;
            background-color:white;
            display:flex;
            justify-content:space-between;
            align-items:center;
            .seeInfo{
                display:flex;
                align-items:center;
                i{
                    color:#11bf79;
                    font-size:1.5em
                }
            }
            .see-icon{
                font-size:1.5em;
            }
        }
    }
</style>
